<template>
  <!--选择设备-->
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    :cancelButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="handleCancel" cancelText="关闭" okText="确定">
    <!--表单-->
    <a-spin :spinning="confirmLoading">
      <j-form-container class="scroll-view" style="height: 600px">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">

          <a-row style="border:0.5px solid #eee;padding: 10px 0;">
            <a-col :span="12">
              <a-form-model-item label="归属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName"
                style="margin-bottom: 10px;">
                <a-select :disabled="disabled" placeholder="请选择归属项目" :value="model.projectName"
                  @change="handleChange('project',$event)">
                  <a-select-option v-for="(item,index) in projectList" :key="index" :value="item">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="typeName"
                style="margin-bottom: 10px;">
                <a-select :disabled="disabled" placeholder="请选择设备类型" :value="model.typeName"
                  @change="handleChange('type',$event)">
                  <a-select-option v-for="(item,index) in typeList" :key="index" :value="item">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name"
                style="margin-bottom: 10px;">
                <a-input :disabled="disabled" v-model="model.name" placeholder="请输入设备名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="规格型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="model"
                style="margin-bottom: 10px;">
                <a-input :disabled="disabled" v-model="model.model" placeholder="请输入规格型号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address"
                style="margin-bottom: 10px;">
                <a-select :disabled="disabled" placeholder="请选择设备位置" :value="model.address"
                  @change="handleChange('address',$event)">
                  <a-select-option v-for="(item,index) in addressList" :key="index" :value="item">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="number"
                style="margin-bottom: 10px;">
                <a-input :disabled="disabled" v-model="model.number" placeholder="请输入设备编号"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row style="margin: 10px 0 20px;">
            <a-col :span="24">
              <span style="font-size: 16px; font-weight: bold;">进出场单据明细</span>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-table :columns="columns" :dataSource="deviceList" :pagination="false"
                style="margin-bottom: 20px;">
                <template slot="type" slot-scope="text,record">
                  <span >{{text === '1'?'进场单':text === '2'?'退场单':''}}</span>
                </template>
              </a-table>
            </a-col>
          </a-row>

        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
  import {
    httpAction,
    getAction,
    postAction
  } from '@/api/manage'
  export default {
    name: 'WtDevicetypeModal',
    data() {
      return {
        title: '',
        width: 1000,
        visible: false,
        disableSubmit: false,
        //表单
        confirmLoading: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        labelCol2: {
          xs: {
            span: 24
          },
          sm: {
            span: 3
          }
        },
        wrapperCol2: {
          xs: {
            span: 24
          },
          sm: {
            span: 21
          }
        },
        labelCol3: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        },
        wrapperCol3: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        },
        validatorRules: {},
        model: {
          id:'',
          projectName: '',
          projectId: '',
          categoryOneName: '',
          categoryOneId: '',
          typeName: '',
          type: '',
          name: '',
          model: '',
          number: '',
        },
        projectList: [], //项目列表
        categoryOneList: [], //设备
        typeList: [], //设备类型
        nameList: [], //设备名称
        deviceList: [], //设备列表
        url: {
          add: '',
          edit: '',
          list: '/equipment/wtEquipment/getWtEquipmentModelList',
          detail: '',
          delete: '',
        },
        disabled: false,
        columns: [{
            title: '填单日期',
            dataIndex: 'filingTime',
            width: '15%',
          },
          {
            title: '进场/退场日期',
            dataIndex: 'recordTime',
            width: '15%',
          },
          {
            title: '进场/退场单号',
            dataIndex: 'recordNumber',
            width: '15%',
          },
          {
            title: '类型',
            dataIndex: 'type',
            width: '10%',
            scopedSlots: {
              customRender: 'type'
            },
          },
          {
            title: '保管人',
            dataIndex: 'preserverUserName',
            width: '10%',
          },{
            title: '进场存放位置/退场地点',
            dataIndex: 'address',
            width: '35%',
          }
        ],
        selectedRowKeys: [],
        selectedRowKeyss: [],
      }
    },
    created() {
      
    },
    mounted() {

    },
    methods: {
      //获取数据
      getData() {
        this.deviceList = [];
        getAction(`/equipment/wtEquipmentDetail/getWtEquipmentDetailModelList?equipmentId=${this.model.id}`).then((res) => {
          if (res && res.length > 0) {
            this.deviceList = res.map(v => ({
              ...v,
              key: v.id,
              filingTime:v.filingTime.split(' ')[0],
              recordTime:v.recordTime.split(' ')[0],
            }));
            this.Dictionary();
          }
        })
      },
      //下拉选择
      handleChange(type, item, index) {
        console.log(1, type, item, index);
        let _self = this;
        if (type === 'project') {
          this.model.projectName = item.label;
          this.model.projectId = item.value;
        } else if (type === 'type') {
          this.model.typeName = item.label;
          this.model.type = item.value;
        }
      },
      //获取数据字典列表
      Dictionary() {
        var _self = this;
        //项目列表
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
          if (res.success) {
            this.projectList = [];
            let treeList = res.result;
            this.projectList = [...treeList].map((v) => ({
              ...v,
              value: v.id,
              label: v.departName,
            }))
          }
        })

        //设备类型
        getAction('/wtCategory/list').then((res) => {
          if (res.success) {
            let treeList1 = res.result;
            let treeList = [];
            if (treeList1 && treeList1.length > 0) {
              treeList1.forEach(ite => {
                if (ite.name === '设备机械') {
                  /* this.model.categoryOneId = ite.id;
                  this.model.categoryOneName = ite.name;
                  let categoryOneList = [];
                  categoryOneList.push(ite);
                  this.categoryOneList = categoryOneList.map(v => ({
                    ...v,
                    value: v.id,
                    label: v.name,
                  })); */
                  if (ite.children && ite.children.length > 0) {
                    treeList = ite.children;
                  }
                }
              })
              if (treeList && treeList.length > 0) {
                this.typeList = [...treeList].map((v) => ({
                  ...v,
                  value: v.id,
                  label: v.name,
                }))
                let info = this.typeList.find((item) => item.label == this.model.type);
                if (!!info) {
                  this.model.typeName = info.label;
                }
              }
              
            }
          }
        })
      },
      add(type, record) {
        this.visible = true;
        this.Dictionary();
      },
      edit(type, record) {
        console.log(22,type,record)
        this.model = record;
        this.visible = true;
        this.getData();
        this.$forceUpdate();
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        this.visible = false;
      },
      submitCallback() {
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>
<style scoped>
  .scroll-view {
    overflow: auto;
    overflow-y: scroll;
  }
</style>